<template>
  <!-- 顶部标题组件 -->
  <view class="title">
    <slot name="title">默认标题</slot>

    <div class="sousuo">
      <uni-icons class="tu" type="search" size="16"></uni-icons>
      <view class="search" @click="toSearch">搜索</view>
    </div>
  </view>
</template>

<script setup>
const toSearch = () => {
  uni.navigateTo({
    url: "/pages/Search/index",
  });
};
</script>

<style scoped lang="scss">
.title {
  display: flex;
  width: 100%;
  height: 60rpx;
  // border: 1px solid red;

  .sousuo {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 20rpx;
    border-radius: 50rpx;
    border: 1rpx solid white;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10rpx);

    .tu {
      position: absolute;
      left: 10rpx;
    }

    .search {
      width: 150rpx;
      padding: 10rpx;
      padding-left: 25rpx;
      margin-left: 20rpx;
      border-radius: 30rpx;
      color: gray;
    }
  }
}
</style>